<!--  -->
<template>
  <div class="collegetwo">
    <div class="listall">
      <ul>
        <li
          v-for="(item, index) in notifications"
          :key="index"
          class="notification-item"
        >
          <a class="notification-title" :href="item.link">{{ item.title }}</a>
          <span class="notification-date">{{ item.date }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: [
        {
          title: '2023国自有你，未来更精彩',
          date: '2023-06-01',
          content: '这是第一条通知公告的内容。',
        },
        {
          title: '2023卡尔蔡司光学（中国）有限公司校园招聘',
          date: '2023-06-02',
          content: '这是第二条通知公告的内容。',
        },
        {
          title: '湖北航特装备制造股份有限公司简介',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '“鸿鹄之志 与梦想并肩”---帝尔激光 2022 届校园招聘简章---',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '苏州智睿希尔智能科技有限公司招聘简章',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '奋达科技集团2022届校招简章',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '机械工程学院2021年度1+X多轴数控加工职业技能等级证书考核耗材招标公示',
          date: '2023-06-02',
          content: '这是第二条通知公告的内容。',
        },
      ], // 初始化数据列表
    };
  },
};
</script>

<style  scoped>
.collegetwo {
  z-index: 9999;
}
.listall ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.listall{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  margin-top: 90px;
}
.listall .notification-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.listall .notification-title {
  font-size: 18px;
  color: #333;
  text-decoration: none;
  
}

.listall .notification-title:hover {
  color: #007aff;
}

.listall .notification-date {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.notification {
  display: inline-block;
  padding: 15px 48px;
  background-color: #0b6cb8;
  color: #fff;
  border-radius: 5px;
  margin-top: 10px;
}
</style>
